<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>
<style>
    .demo {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding-bottom: 20px;
    }
</style>

<body>
    <p>图标类型</p>
    <!-- 头像 -->
    <div class="demo">

        <!-- 图标 -->
        <div class="jmAvatar">
            <i class="layui-icon layui-icon-home"></i>
        </div>

        <!-- 文字 -->
        <div class="jmAvatar">
            <span>我</span>
        </div>

        <!-- 图片 -->
        <div class="jmAvatar radius-full">
            <img src="../avatar_1.jpg" alt="">
        </div>

    </div>

    <p>不同圆角</p>
    <div class="demo">

        <!-- 图标 -->
        <div class="jmAvatar xl">
            <i class="layui-icon layui-icon-home"></i>
        </div>

        <!-- 文字 -->
        <div class="jmAvatar xxl">
            <span>我</span>
        </div>

        <!-- 图片 -->
        <div class="jmAvatar xxxl">
            <img src="../avatar_1.jpg" alt="">
        </div>

    </div>

    <p>图片类型大小</p>

    <div class="demo">

        <div class="jmAvatar img-size-s">
            <img src="../avatar_2.png" alt="">
        </div>

        <div class="jmAvatar img-size-m">
            <img src="../avatar_2.png" alt="">
        </div>

        <div class="jmAvatar">
            <img src="../avatar_2.png" alt="">
        </div>
    </div>

    <p>不同大小</p>
    <div class="demo">
        <!-- 图标 -->
        <div class="jmAvatar xs">
            <i class="layui-icon layui-icon-home"></i>
        </div>

        <!-- 文字 -->
        <div class="jmAvatar sm">
            <span>我</span>
        </div>

        <div class="jmAvatar lg">
            <span>我</span>
        </div>

        <div class="jmAvatar xl">
            <i class="layui-icon layui-icon-home"></i>
        </div>
    </div>

</body>
<script>
    // 配置
    layui.config({
        base: "../model/"
    })

    //图标点击示例
    layui.use(["jmAvatar"], function () {
        var jmAvatar = layui.jmAvatar;

        jmAvatar.click(function (dom) {
            console.log(dom);
        });
    })

</script>

</html>